<template>
<div>
    <teleport to="body">
        <ul :class="openCls" @mouseleave="myEvent">
            <slot></slot> 
        </ul>
    </teleport>   
</div>    
</template>
<script lang="ts" setup>

import { ref, watch, computed } from 'vue'

let props = defineProps({
    x: Number,
    y: Number,
    isShow: Boolean   
})
let show = ref(props.isShow)
let openCls = computed(() => `dl-menu ${show.value ? '.dl-menuopen' : 'dl-menu-hide'}`)

let x = props.x + "px"
let y = props.y + "px"

watch(() => props.x, v => { x = v + "px"})
watch(() => props.y, v => { y = v + "px"})
watch(() => props.isShow, v => { show.value = v })

const emitLeave = defineEmits(["leave"])

const myEvent = () => { emitLeave('leave') }

</script>
<style lang="scss" scoped>
.dl-menu-hide {
    opacity: 0;
    display: none;
}

.dl-menuopen {
    opacity: 1;
}

.dl-menu {
    font-size: 13px;
    left: v-bind('x');
    top: v-bind('y');
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.1);
    width: 300px;
    background: white;
    list-style: none;
    position: absolute;
    z-index: 1000;
}
</style>